import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLocation } from "react-router-dom";
import { List, Card, Grid, Divider, Button, Dialog, Toast } from "antd-mobile";
import { createAction } from "@common/utils";
import {
  SET_PAGE_TITLE,
  SET_SHOW_HOME_BTN,
} from "@store/global-state/action-types";
import { SET_MOVE_DIRECTLY_DATA_ID } from "@store/move-directly/action-types";
import { SAGA_MOVE_DIRECTLY_LOAD_DETAILS } from "@store/move-directly/saga-types";
import { SAGA_MOVE_DIRECTLY_DEL_DETAILS } from "@store/move-directly/saga-types";

const Details = () => {
  const dispatch = useDispatch();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const details = useSelector((state) => state.moveDirectly.details);

  useEffect(() => {
    dispatch(createAction(SET_PAGE_TITLE, "直接移库--明细"));
    dispatch(createAction(SET_SHOW_HOME_BTN, false));
    dispatch(
      createAction(SAGA_MOVE_DIRECTLY_LOAD_DETAILS, {
        dataId: searchParams.get("dataId"),
      })
    );
    return () => {
      dispatch(
        createAction(SET_MOVE_DIRECTLY_DATA_ID, {
          id: searchParams.get("dataId"),
        })
      );
      dispatch(createAction(SET_SHOW_HOME_BTN, true));
    };
  }, []);

  const Descriptions = ({ title, record }) => (
    <Card title={title}>
      <Grid columns={2} gap={12}>
        <Grid.Item>移出库位</Grid.Item>
        <Grid.Item>{record.fromLocationName}</Grid.Item>
        <Grid.Item>物料条码</Grid.Item>
        <Grid.Item>{record.itemBarcode}</Grid.Item>
        <Grid.Item>物料编码</Grid.Item>
        <Grid.Item>{record.itemCode}</Grid.Item>
        <Grid.Item>物料名称</Grid.Item>
        <Grid.Item>{record.itemName}</Grid.Item>
        <Grid.Item>数量</Grid.Item>
        <Grid.Item>{record.qty}</Grid.Item>
        <Grid.Item>移入库位</Grid.Item>
        <Grid.Item>{record.toLocationName}</Grid.Item>
      </Grid>
      <Divider />
      <div style={{ display: "flex", justifyContent: "flex-end" }}>
        <Button
          size="small"
          color="danger"
          onClick={() => handleDelete(record)}
        >
          删除
        </Button>
      </div>
    </Card>
  );

  const handleDelete = async (record) => {
    Dialog.confirm({
      content: "确定删除此项?",
      onAction: ({ key }) => {
        if ("confirm" === key) {
          dispatch(
            createAction(SAGA_MOVE_DIRECTLY_DEL_DETAILS, {
              id: record.id,
              callback: () =>
                Toast.show({
                  icon: "success",
                  content: "删除成功",
                  maskClickable: false,
                }),
            })
          );
        }
      },
    });
  };

  return (
    <>
      <div style={{ marginTop: "45px", marginBottom: "65px" }}>
        <List>
          {details?.map((i, idx) => (
            <List.Item
              key={idx}
              style={{ backgroundColor: "#F5F5F5" }}
              description={
                <Descriptions
                  title={`${idx + 1}/${details?.length}`}
                  record={i}
                />
              }
            />
          ))}
        </List>
      </div>
    </>
  );
};

export default Details;
